/**
 * 案例：
 *    1. 实现一个前端搜索功能
 */

// 引入拆分出去的组件
import TaskSearch from "./components/TaskSearch";
import TaskList from "./components/TaskList";
import { useMemo, useState } from "react";

function App() {
  // 搜索关键字
  const [keyword, setKeyword] = useState("");
  // 待办事项列表数据
  const [tasks, setTasks] = useState([
    { id: 1, title: "吃饭", done: false },
    { id: 2, title: "睡觉", done: false },
    { id: 3, title: "打豆豆", done: true },
  ]);

  // 搜索结果数据，
  const searchResult = useMemo(() => {
    if (!keyword) {
      // 返回全量数据
      return [...tasks];
    }
    // 精准搜索
    // return tasks.filter((item) => item.title === keyword);

    // 模糊搜索
    return tasks.filter((item) => item.title.includes(keyword));
  }, [tasks, keyword]);

  /**
   * // 搜索方法
   * @param {*} title 搜索关键字
   */
  function onSearch(title) {
    // 将 title 赋值给 keyword
    setKeyword(title);

    // 根据 这个 title 与 tasks 做一个过滤，过滤出 tasks 中 title 字段与 这里的 title 参数一样的内容
    // console.log("onSearch title", title);
    // const result = tasks.filter((item) => item.title === title);
    // console.log("onSearch result", result);
    // 将 result 作为 TaskList 组件的 list prop
    //    思考，我能直接将 result 赋值给 tasks 嘛？ 不可以，修改掉源数据之后，会让我们数据无法回退
    //        setTasks(result);
    //        应该再设置一个数据，是基于 搜素关键字与tasks算出来的一份搜索结果数据。使用 useMemo
  }

  return (
    <div>
      <h1>App</h1>
      <TaskSearch keyword={keyword} onSearch={onSearch} />
      <hr />
      <TaskList list={searchResult} />
    </div>
  );
}

export default App;
